@use "@/styles/mixins/bem" as *;
@use "@/styles/mixins/namespace" as *;
@use "@/styles/variables" as *;

@include b(login-form) {
  .#{$el-namespace}-form-item {
    margin-bottom: 20px;

    .#{$el-namespace}-button {
      margin-left: 0;
    }

    @include e(item) {
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;
    }

    @include e(third-item) {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      cursor: pointer;

      .svg-icon:hover {
        color: var(--#{$el-namespace}-color-primary);
      }
    }

    :deep(.#{$el-namespace}-input-group__append) {
      padding: 0;
    }
  }

  @include e(btn) {
    gap: 20px;
    width: 100%;

    @media (max-width: $device-phone) {
      flex-wrap: wrap;
      justify-content: center;
    }

    .#{$el-namespace}-button {
      width: 185px;

      @media (max-width: $device-phone) {
        width: 100%;
      }
    }
  }
}
